<template>
	<view class="nav-audience-content">
		<!-- 常用观众 -->
		<view class="nav-audience-container">
			<!-- 添加按钮 -->
			<view class="add-btn" @click="popupBtn('add')">
				<text class="iconfont">&#xe664;</text>
				添加常用预约人
			</view>
			<!-- 观众列表 -->
			<view class="list">
				<view class="item-list-container" v-for="(item,index) in lists" :key="item.id" @click="onHandle({type:(options && options.type) || 'del',item,index})">
					<view class="item-list">
						<template v-if="options && options.type === 'appointment'">
							<view class="iconfont delIcon emptyIcon" :class="{'redIcon':!judgeLsCard(item.idCardNo)}">{{ getEmptyOrSelectIcon(item) }} </view>
						</template>
						<template v-else>
							<view class="iconfont delIcon">&#xe677;</view>
						</template>
						<view class="content">
							<view class="name">{{ item.name }}</view>
							<view>证件号码：{{ item.idCardNo }}</view>
							<view>手机号码：{{ item.mobile }}</view>
						</view>
						<!-- 编辑按钮暂无修改 -->
						<!-- <view class="iconfont editIcon">&#xe600;</view> -->
					</view>
					<view v-if="options && options.type === 'appointment' && !judgeLsCard(item.idCardNo)" class="fLsCard">非丽水身份证用户无法免费预约>>【详情】</view>
				</view>
			</view>
		</view>
		<template v-if="options && options.type === 'appointment'">
			<view class="bottom_sty"></view>
			<view class="btn_sty ac-btn_sty" @click="onNavOrder">{{ `确认预约人(${orderPageUser.length}位)` }}</view>
		</template>
		<!-- 弹出层 -->
		<view class="popup-container" v-if="popupShow">
			<view class="popup__content">
				<view class="popup__wrapper">
					<view class="popup-dialog">
						<view class="dialog-title">{{ getPopupTitle }}</view>
						<view class="dialog-content">
							<view class="item-dialog-content">
								<view class="name-item-dialog-content">姓名</view>
								<input placeholder-class="placeholder-class" class="input-item-dialog-content" type="text" v-model="form.name" placeholder="请输入姓名"/>
							</view>
							<view class="item-dialog-content">
								<view class="name-item-dialog-content">身份证号码</view>
								<input placeholder-class="placeholder-class" class="input-item-dialog-content" type="text" v-model="form.idCardNo" placeholder="请输入身份证"/>
							</view>
							<view class="item-dialog-content last-item-dialog-content">
								<view class="name-item-dialog-content">手机号</view>
								<input placeholder-class="placeholder-class" class="input-item-dialog-content" type="text" v-model="form.mobile" placeholder="请输入手机号"/>
							</view>
						</view>
						<view class="dialog-button-group">
							<view class="dialog-button" @click="popupHideBtn">取消</view>
							<view class="dialog-button border-left ac-dialog-button" @click="onFormSubmit">确认</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 非丽水人不能买 -->
		<view class="popup-container" v-if="exceptTiShi && exceptTiShiPopupShow">
			<view class="popup__content">
				<view class="popup__wrapper">
					<view class="popup-dialog">
						<view class="dialog-title">{{ exceptTiShi.title }}</view>
						<view class="dialog-content">
							<view class="exceptTiShi-content">
								<view class="exceptTiShi" v-html="exceptTiShi.context"></view>
							</view>
						</view>
						<!-- <view class="dialog-button-group">
							<view class="dialog-button" @click="popupHideBtn">取消</view>
							<view class="dialog-button border-left ac-dialog-button" @click="onFormSubmit">确认</view>
						</view> -->
						<view class="exceptTiShi-close">
							<view class="closePageFont" @click="closeExceptTiShi">关闭</view>
							<!-- <view class="iconfont closePageFont" @click="closeExceptTiShi">&#xe725;<text class="closePageTxt">关闭</text></view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/server/getData.js'
	import { mapGetters,mapMutations } from 'vuex'
	// import * as utils from '@/utils/index.js'
	const popupTitleFormat = {
		'add':{
			title:'添加预约人'
		},
		'edit':{
			title:'编辑预约人'
		}
	}
	export default {
		computed:{
			...mapGetters(['orderUsers']),
			getPopupTitle(){
				return popupTitleFormat[this.popupStatus].title
			},
		},
		data(){
			return {
				options:null,
				lists:[],
				orderPageUser:[], //页面上用户是否选中的
				// 弹出框内容
				popupShow:false,
				popupStatus:'add',
				form:{
					name:'',
					idCardNo:'',
					mobile:''
				},
				isFormBtn:false, //提交表单
				maxUsersNumber:5, //最多选择的人数
				exceptTiShiPopupShow:false, //弹出非丽水人的框
				exceptTiShi:null, //通过cms维护
			}
		},
		onLoad(options){
			this.options = options
			this.init_load()
		},
		methods:{
			...mapMutations(['setOrderUsers']),
			// 获取urlParams
			// 获取用户列表
			init_load(){
				this.orderPageUser = this.orderUsers
				this.get_userList()
				this.get_exceptTiShi()
			},
			// 获取用户列表
			async get_userList(){
				try{
					uni.showLoading({ title: '加载中' })
					const res = await api.users.list()
					this.lists = res
				}catch(e){}finally{
					uni.hideLoading()
				}
			},
			async get_exceptTiShi(){
				try{
					const res = await api.news.byId({id:'658e50ce81ca833b7616fb7f'})
					this.exceptTiShi = res
				}catch(e){}
			},
			popupBtn(status){
				this.popupStatus = status
				this.popupShow = true
			},
			popupHideBtn(){
				this.closePopupDialog()
			},
			closePopupDialog(){
				this.form.name = ''
				this.form.idCardNo = ''
				this.form.mobile = ''
				this.popupShow = false
			},
			// 提交表单
			async onFormSubmit(){
				if(this.isFormBtn) return
				try{
					// let reg_let = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
					// if (!reg_let.test(this.form.mobile)) {
					// 	uni.showToast({ title: '请输入正确的手机号码！', icon: 'none', duration: 2000 });
					// 	return
					// }
					this.isFormBtn = true
					const res = await api.users.create(this.form)
					this.lists.push(res)
					this.closePopupDialog()
				}catch(e){
					
				}finally{
					this.isFormBtn = false
				}
			},
			onHandle(params){
				const {type,item,index} = params
				if(type === 'appointment'){
					this.addOrderUsers(item,index)
					return
				}
				if(type === 'del'){
					this.delUser(item,index)
					return
				}
			},
			// 添加下单联系人
			addOrderUsers(item,index){
				// 非丽水人的判断
				if(!this.judgeLsCard(item.idCardNo)){
					this.exceptTiShiPopupShow = true
					return
				}
				const cIndex = this.orderPageUser.findIndex(xitem => xitem.id === item.id)
				if(cIndex > -1){
					this.orderPageUser.splice(cIndex,1)
					return
				}
				if(this.orderPageUser.length >= this.maxUsersNumber){
					uni.showModal({
						title: '提示',
						content: `最多预约${this.maxUsersNumber}位`,
						showCancel:false,
					});
					return
				}
				this.orderPageUser.push(item)
			},
			// 删除
			async delUser(item,index){
				if(this.isFormBtn) return
				try{
					this.isFormBtn = true
					uni.showModal({
						title: '提示',
						content: `是否要删除预约人${item.name}吗?`,
						success: async (res) => {
							if (res.confirm) {
								await api.users.remove(item)
								this.lists.splice(index,1)
							}
						}
					})
				}catch(e){
					
				}finally{
					this.isFormBtn = false
				}
			},
			// 返回参数
			getEmptyOrSelectIcon(item){
				try{
					if(!this.judgeLsCard(item.idCardNo)){
						return '\ue630'
					}
					const cIndex = this.orderPageUser.findIndex(xitem => xitem.id === item.id)
					return cIndex > -1?'\ue647':'\ue602'
				}catch(e){
					console.log(e)
				}
			},
			judgeLsCard(card){
				const idCardNo4 = card.trim().substring(0,4)
				return [3311,3325,'3311','3325'].includes(idCardNo4)
			},
			onNavOrder(){
				this.setOrderUsers(this.orderPageUser)
				uni.navigateBack({
					delta:1
				})
			},
			closeExceptTiShi(){
				this.exceptTiShiPopupShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.nav-audience-content{
		height: 100%;
		background-color: #f5f6fa;
		position: relative;
		.nav-audience-container{
			background-color: #f5f6fa;
			padding: 20rpx;
			.add-btn{
				border: 1px solid #1989fa;
				border-radius: 10rpx;
				height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #1989fa;
				background-color: #fff;
			}
			.list{
				margin-top: 20rpx;
				.item-list-container{
					background-color: #fff;
					border: 1px solid #dbdbdb;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
					padding: 20rpx;
				}
				.fLsCard{
					font-size: 26rpx;
					color: #f56c6c;
					padding-left: 70rpx;
				}
				.item-list{
					display: flex;
					align-items: center;
					// height: 200rpx;
				}
				.delIcon{
					color: #f56c6c;
					font-size: 44rpx;
					padding-right: 26rpx;
					flex-shrink: 0;
				}
				.emptyIcon{
					color: #1989fa;
				}
				.redIcon{
					color: #f56c6c;
				}
				.content{
					font-size: 26rpx;
					color: #000;
					flex: 1;
					.name{
						font-size: 30rpx;
					}
				}
				.editIcon{
					color: #1989fa;
					font-size: 44rpx;
					flex-shrink: 0;
					padding-left: 26rpx;
				}
			}
		}
		.popup-container{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, .4);
			.popup__content{
				height: 100%;
				.popup__wrapper{
					height: 100%;
					transform: scale(1);
					opacity: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.popup-dialog{
						width: 660rpx;
						border-radius: 22rpx;
						background-color: #fff;
						.dialog-title{
							display: flex;
							justify-content: center;
							padding: 50rpx;
							color: #000;
							font-weight: bold;
						}
						.dialog-content{
							padding-left: 32rpx;
							padding-right: 32rpx;
							font-size: 26rpx;
							color: #646566;
							.item-dialog-content{
								padding-top: 20rpx;
								padding-bottom: 20rpx;
								display: flex;
								align-items: center;
								border-bottom: 1px solid #f5f5f5;
								height: 100rpx;
							}
							.name-item-dialog-content::before{
								content: '*';
								color: #f56c6c;
							}
							.name-item-dialog-content{
								width: 160rpx;
								flex-shrink: 0;
							}
							.placeholder-class{
								font-size: 26rpx;
								color: #c4c4c4;
							}
							.input-item-dialog-content{
								font-size: 32rpx;
								color: #32322E;
								width: 100%;
								height: 100%;
							}
							.last-item-dialog-content{
								border-bottom:none;
							}
							// 除丽水外的提示
							.exceptTiShi-content{
								height: 300px;
								overflow-y: auto;
								margin-bottom: 30rpx;
							}
							.exceptTiShi{
								overflow: hidden;
								font-size: 34rpx;
								letter-spacing: .08rpx;
								line-height: 56rpx;
								word-break: normal;
								word-wrap: break-word;
								text-align: justify;
							}
						}
						.exceptTiShi-close{
							// position: relative;
							// height: 60rpx;
							padding-bottom: 10rpx;
							.closePageFont{
								// position: absolute;
								// top: 30rpx;
								// left: 50%;
								// transform: translateX(-50%);
								text-align: center;
								font-size: 34rpx;
								color: #000;
							}
						}
						.dialog-button-group{
							display: flex;
							flex-direction: row;
							border-top: 1px solid #f5f5f5;
							.dialog-button{
								display: flex;
								flex: 1;
								flex-direction: row;
								justify-content: center;
								align-items: center;
								height: 90rpx;
							}
							.border-left{
								border-left: 1px solid #f5f5f5;
							}
							.ac-dialog-button{
								color: #007aff;
							}
						}
					}
				}
				.ac_popup__wrapper{
					transform: scale(1);
					opacity: 1;
				}
			}
		}
	}
	.bottom_sty{
		height: 100rpx;
	}
	.btn_sty{
		background-color: #999;
		height: 100rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFF;
		position: fixed;
		bottom: 0;
	}
	.ac-btn_sty{
		background-color: #2979ff;
	}
</style>